<template>
	<view>
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<!-- <block slot="content">{{corpCode}}-条码比对</block> -->
				<block slot="content">序列号绑定</block>
			</cu-custom>
		</view>
		<view class="cu-bar bg-white search fixed indexes" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="getData" v-model="inputVal" type="text" placeholder="请聚焦后扫描条码" :focus="focus"></input>
			</view>
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<view class="cu-bar bg-white  solid-bottom margin-top " style="margin-top: 13%;">
		<!-- 	<view class="action text-xl">
				<text class="cuIcon-title text-orange"></text>绑定方式
			</view> -->
			
			<view style="width: 100%;">
				<!-- <view class="cu-form-group"  @click="xzfs">
					<view class="title text-black text-bold" style="font-size: 18px;">绑定方式：</view>
					<view style="flex: 1;"> {{infoData.name || '请选择'}}</view>
				</view> -->
				<view class="cu-form-group " >
					<view class="title text-black text-bold" style="font-size: 18px;">子箱个数：</view>
					<input  v-model="infoData.num" placeholder="请输入" name="input" type="number" :focus="numfocus"></input>
				</view>
			</view>
		</view>
		<!-- <view class="indexes"> -->
			
		
		<scroll-view scroll-y="true" class="indexes" :scroll-with-animation="true" :enable-back-to-top="true"
			:style="[{height:'calc(100vh - '+ CustomBar + 'px - 100px)'}]">
			<view class="bg-white margin-bottom margin-top">
				<view>
					<view class="flex-sub text-center solid-bottom text-md padding">
						<text class="text-black text-bold">主箱码</text>
						<!-- （<text class="text-black text-bold" style="color: red;">1</text>） -->
					</view>
				</view>
				<view class="text-gray cu-form-group" style="display: flex;" >
					<text class="text-blue margin-right-xs" style="flex: 1;">条码：{{zviewCode}}</text>
					<button  v-if="zviewCode" @click="unbind" type="primary">
						解绑
					</button>
				</view>
				<view class=" cu-form-group" style="display: flex;" >
					<text class=" margin-right-xs"  style="flex: 1;">SKU：{{zviewSKU}}</text>
					<button v-if="zviewCode" @click="reset" type="warn">
						重置
					</button>
				</view>
			
			</view>
			<!-- <view v-if="isShowe" class="action-section">
				<image src="../../static/dh.png" mode="aspectFit" style="width: 50px;height: 50px;"></image>
			</view>
			<view v-if="isShowo" class="action-section">
				<image src="../../static/cw.png" mode="aspectFit" style="width: 50px;height: 50px;"></image>
			</view> -->
			<view class="bg-white margin-bottom">
				<view>
					<view class="flex-sub text-center solid-bottom text-md padding">
						<text class="text-black text-bold">子箱码</text>
						<!-- （<text class="text-black text-bold" style="color: red;">{{params.num}}</text>） -->
					</view>
				</view>
				<view style="background-color: #eee;padding-top: 5px;">
					<view v-for="(item,index) in sonlist" :key="index" style="margin-bottom: 5px;">
						<view class="text-gray cu-form-group" style="display: flex;position: relative;" >
							<text class="text-blue margin-right-xs" style="flex: 1;">条码：{{item.code}}</text>
							<button  type="primary"  @click="unbind(item)" style="position: absolute;top: 30px;right: 10px;">
								解绑
							</button>
						</view>
						<view class="cu-form-group" style="display: flex;"  >
							<text class=" margin-right-xs" style="flex: 1;">SKU：{{item.name}}</text>
						</view>
					</view>
				</view>
				
				
				<view v-if="!sonlist.length" >
					<view class="text-gray cu-form-group" >
						<text class="text-blue margin-right-xs">条码：</text>
					</view>
					<view class=" cu-form-group" >
						<text class="margin-right-xs">SKU：</text>
					</view>
					
				</view>
				
			</view>
		</scroll-view>
		<!-- </view> -->
		
		<!-- <view class="action-section">
			<button type="primary" class="no-border confirm-btn" @click="save">提交</button>
		</view> -->
		
		<view class="bg" v-show="show">
			<view style="width: 80%; height: 280px;background: #fff;border-radius: 10px;padding: 20px;
			display: flex;flex-direction: column;justify-content: space-between;">
				<view class="">
					<view style="font-weight: bold;">
						请选择绑定方式：
					</view>
					<view v-for="(item,index) in listArr" :key="index" @click="xuanzhe(item)"
					 style="padding: 10px;border: 1px solid #aaa; border-radius: 10px;margin: 10px 15px;"
					 :style="{background:item.check?'#00aa00':'',color:item.check?'#fff':''}">
						{{item.name}}
					</view>
					<!-- <view class="cu-form-group ">
						<view class="title" >需绑定子个数：</view>
						<input v-model ="num"  placeholder="请输入" name="input" type="number" style="border-bottom: 1px solid #aaa;text-align:center;"></input>
					</view> -->
				</view>
				<view style="display: flex;">
					<button @click="show=false" type="default">
						关闭
					</button>
					<button @click="confirm" type="primary">
						确定
					</button>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				num:'',
				show:false,
				listArr:[
					{
						check:true,
						name:'方式1  A-B'
					},{
						check:false,
						name:'方式2  A-C'
					},{
						check:false,
						name:'方式3  B-C'
					}
				],
				infoData:{},
				sonlist:[],
				params:{},
				focus: true,
				numfocus: false,
				menuArrow: true,
				CustomBar: this.CustomBar, //滚动定位用
				inputVal: "", //扫码值
				cdata: '', //任务列表

				zviewCode: '', 
				zviewSKU: '',
				srmcinvname: '',
				posList: [],
				// isCheck: false, //是否可用
				isShowe: false,
				isShowo: false,
				vals: '',
				markCode: '', //装code变量
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		onShow() {

		},
		onLoad(params) {
			// this.params = JSON.parse(params.data)
			// console.log(this.params);
			// for (let i = 0; i < this.params.num; i++) {
			// 	this.sonlist.push({})
			// }
		},
		methods: {
			unbind(item){
				console.log(item);
			},
			reset(){
				uni.showModal({
					content: '是否确认重置',
					success: function(res) {
						if(res.confirm){
							this.zviewCode = ''
							this.zviewSKU= ''
							this.sonlist = []
						}
						this.focus = false;
						setTimeout(() => {
							this.focus = true;
						}, 500)
					}.bind(this)
				});
				
			},
			save(){
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500)
				this.zviewCode = '';
				this.sonlist = [];
			},
			xzfs(){
				this.show = true
			},
			confirm(){
				
					let data = {}
					this.listArr.forEach(item=>{
						if(item.check){
							data = {...item}
						}
					})
					if(data.name != this.infoData.name){
						this.zviewCode = '';
						this.sonlist = [];
					}
					
					this.infoData = {
						...data,
						num:this.infoData.num
					}
					
					this.show = false;
					this.focus = false;
					setTimeout(() => {
						this.focus = true;
					}, 500)
			},
			xuanzhe(item){
				this.listArr.forEach(e=>{
					if(e.name == item.name){
						e.check = true
					}else{
						e.check = false
					}
				})
				this.$forceUpdate()
			},
			/** 获取数据 扫描盘点任务单，获取当前盘点人需盘点货位列表*/
			getData() {
				let that = this
				
				if(!this.infoData.num || this.infoData.num<=0){
					this.$api.msg('请输入绑定的子箱个数');
					this.scSb();
					setTimeout(()=>{
						this.inputVal = '';
					},50)
					this.numfocus = false;
					setTimeout(() => {
						this.numfocus = true;
					}, 500)
					return;
				}
				
				if(this.infoData.num <= this.sonlist.length ){
					// this.$api.msg('子箱个数已绑定完成！');
					uni.showModal({
						title: '提示',
						content: '子箱个数已绑定完成！',
						showCancel: false,
						success: function(res) {}
					});
					this.scSb();
					return;
				}
				
				uni.request({
					url: this.serverURL_a + `/snno/bind/barBindRds/barBind`,
					data: {
						ccode: this.inputVal,
						needBind:this.zviewCode?'1':'0',
						parentCode:this.zviewCode?this.zviewCode:'',
						__sid: this.userInfo.sessionid,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success: function(data) {
						let res = data.data
						if(res.result == 'true'){
							console.log("成功")
							//提示成功声
							console.log("=====testClick=====");
							let src = '../../static/cg1.mp3';
							//实例化声音  
							const Audio = uni.createInnerAudioContext();
							Audio.autoplay = true;
							Audio.src = src; //音频地址  
							Audio.play(); //执行播放  
							Audio.onError((result) => {
								console.log(result.errMsg);
								console.log(result.errCode);
							});
							Audio.onPause(function() {
								console.log('end');
								Audio.destroy();
							});
							
							if(!that.zviewCode){
								that.zviewCode = res.barCodeInfo.barCode
								that.zviewSKU = res.barCodeInfo.basInv.cinvname
								that.sonlist = res.childList.map(item=>{
									return {
										code:item.ccode,
										name:item.invName,
									}
								})
							}else{
								this.sonlist.unshift({
									code:res.barCodeInfo.barCode,
									name:res.barCodeInfo.basInv.cinvname,
								})
							}
							
						}else{
							// that.$api.msg(res.message);
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
								success: function(res) {}
							});
							console.log("扫码失败！")
							that.scSb();
						}
						setTimeout(()=>{
							that.inputVal = '';
						},50)
						that.focus = false; // 初始化 第二个输入框focus 属性
						setTimeout(() => {
							that.focus = true; //  第二个输入框获取焦点
						}, 500)
						
					}.bind(this),
					fail: function() {
						this.$api.msg('无法连接服务，请联系管理');
						this.inputVal = ''
						return;
					}.bind(this),
				})
				
				
				
				
				
				// if(!this.zviewCode){
				// 	this.zviewCode = this.inputVal
				// }else{
				// 	let arr = [...this.sonlist]
				// 	arr.unshift({
				// 		code:this.inputVal
				// 	})
				// 	this.sonlist = arr.slice(0, this.infoData.num);
				// }
				// setTimeout(()=>{
				// 	this.inputVal = '';
				// },50)
				// this.focus = false; // 初始化 第二个输入框focus 属性
				// setTimeout(() => {
				// 	this.focus = true; //  第二个输入框获取焦点
				// }, 500)
				
				
			},

			/** 标准标签信息*/
			getPostData() {
				setTimeout(()=>{
					this.inputVal = '';
				},50)
				if (!this.srmviewCode || !this.hwcode) {
					this.$api.msg("请继续另一个码!");
					return;
				} else {
					uni.request({
						url: this.serverURL_a + '/so/App/checkSkuAndCode',
						data: {
							code: this.markCode,
							__sid: this.userInfo.sessionid,
							srmCode: this.srmviewCode,
							cusCode: this.hwcode,
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						method: 'POST',
						success: function(res) {
							var result = res.data;
							if (result.result == 'true') {
								console.log("成功")
								//提示成功声
								console.log("=====testClick=====");
								let src = '../../static/cg1.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.cleanData();
							} else if (result.result == '1003') {
								console.log('end');
								this.$api.msg(result.message);
								console.log(result.message)
								console.log("SKU不存在！")
								console.log("=====testClick=====");
								let src = '../../static/bcz.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.cleanData();
								return;
							} else if (result.result == '1004') {
								this.$api.msg(result.message);
								console.log("请勿重复扫描！")
								console.log("=====testClick=====");
								let src = '../../static/chongfu.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.focus = true;
								this.cleanData();
								return;
							} else if (result.result == '1005') {
								this.$api.msg(result.message);
								console.log("数量超出！")
								console.log(result.message)
								console.log("=====testClick=====");
								let src = '../../static/slcc.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								setTimeout(() => {
									this.cleanData();
								}, 500)
								return;
							} else {
								this.$api.msg(result.message);
								console.log("扫码失败！")
								console.log(result.message)
								this.scSb();
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								setTimeout(() => {
									this.cleanData();
								}, 500)
								return;
							}
						}.bind(this),
						fail: function() {
							this.$api.msg('服务已停止,请稍后再试');
							setTimeout(() => {
								this.inputVal = '';
								this.cleanData();
							}, 500)
							return;
						}.bind(this),
					});
				}
			},
			/** 扫码失败*/
			scSb() {
				console.log("=====testClick=====");
				let src = '../../static/smsb.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 扫码成功*/
			scCg() {
				console.log("=====testClick=====");
				let src = '../../static/smcg.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 清空数据 */
			cleanData() {
				this.srmviewCode = '';
				this.hwcode = '';
				this.focus = true;
			},
			/** 扫码*/
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						var rdata = res.result;
						this.inputVal = rdata;
						setTimeout(function() {
							this.getData();
							this.inputVal = '';
							this.focus = true;
						}.bind(this), 100);
					}.bind(this)
				});
			},
		}
	}
</script>

<style>
	
	
	
	.confirm-btn {
		padding: 0 38upx;
		margin: 0;
		height: 76upx;
		line-height: 76upx;
		font-size: $font-base + 2upx;
		background: $uni-color-primary;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.indexes {
		font-size: 18px;
	}

	/* 底部栏 */
	.action-section {
		position:fixed;
		left: 75%;
		bottom:30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.9);
		border-radius: 40upx;
	}
	
	.bg {
		 z-index: 9999;
		 background:rgba(0,0,0,.4);
		 position:fixed;
		 left:0;
		 right:0;
		 top:0;
		 bottom:0;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
</style>